<template>
  <div class="article-chunk">
    <div class="title-date">
      <div class="title">{{ article.title }}</div>
      <div class="date">{{ article.date }}</div>
    </div>
    <div class="description">{{ article.description }}</div>
  </div>
</template>

<script>

export default {
  name: "ArticleChunk",
  props: {
    article: Object,
  }
}
</script>

<style lang="scss">
.article-chunk {
  padding: 10px;
  height: 80px;
  width: 668px;
  background: white;
  margin-bottom: 10px;

  .title-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    .title {
      font-size: 20px;
      font-weight: bold;
      color: rgba(var(--f52, 142, 142, 142), 1);
    }

    .date {
      color: rgba(var(--f52, 142, 142, 142), 1);
    }
  }

  .description {
    height: 42px;
  }
}
</style>